<script lang="ts" setup>
import { get, post, message, loadFile } from '@/utils'
import useModal from '@/hooks/useModal'
import UploadModal from '@/components/upload/UploadModal.vue'
import AddModalVue from '@/components/upload/AddModal.vue'
const { store } = useModal()
const { store: addStore } = useModal()
const tab = ref<any[]>([])
const checked = ref([''])
const loading = ref(false)
const getTab = () => {
  get({ url: '/server-resource/attach/category/list' }, ({ data }) => {
    tab.value = [{ name: '全部分类', id: '' } as FileCategory].concat(data)
  })
}
const total = ref(0)
const searchQuery = reactive({
  current: 1,
  size: 30,
  categoryId: '',
})
const selectList = ref<string[]>([])
const list = ref<FileItem[]>([])
const getList = () => {
  loading.value = true
  get({ url: '/server-resource/attach/page', data: searchQuery }, ({ data }) => {
    list.value = data.records
    total.value = data.total
    loading.value = false
  })
}
const onSearch = () => {
  searchQuery.current = 1
  getList()
}
const handleRemove = () => {
  post({ url: '/server-resource/attach/remove?ids=' + selectList.value.join(',') }, ({ code, msg }) => {
    if (code == 200) onSearch()
    // checked.value = []
    selectList.value = []
    message({
      type: code == 200 ? 'success' : 'error',
      content: msg,
    })
  })
}
const onSelect = item => {
  if (selectList.value.some(f => f == item.id)) {
    const _index = selectList.value.findIndex(f => item.id == f)
    selectList.value.splice(_index, 1)
  } else {
    selectList.value.push(item.id)
  }
}
const handleSave = () => {
  let imgs: string[] = []
  list.value.map(item => {
    if (selectList.value.some(f => f == item.id)) {
      imgs.push(item.link)
    }
  })
}
// 切换左侧菜单
const onChange = e => {
  searchQuery.categoryId = e
  onSearch()
  selectList.value = []
}
const remove = item => {
  post({ url: '/server-system/admin/attach/category/remove?ids=' + item.id }, ({ code, msg }) => {
    if (code == 200) {
      searchQuery.categoryId = ''
      getTab()
      onSearch()
    }
    message({
      type: code == 200 ? 'success' : 'error',
      content: msg,
    })
  })
}

/**获取点击顺序的下标 */
const getSelectIndex = id => selectList.value.findIndex(f => f == id) + 1
onMounted(() => {
  getTab()
  onSearch()
})
</script>
<template>
  <a-card>
    <div class="page hide-scroll">
      <div class="content flex">
        <div class="tab flex-c mr20">
          <div class="scrollbar">
            <a-tree :blockNode="true" v-model:selected-keys="checked" @select="onChange" :data="tab" :fieldNames="{ key: 'id', title: 'name' }">
              <template #extra="nodeData">
                <a-dropdown trigger="hover" size="small">
                  <IconMore style="position: absolute; right: 8px; font-size: 12px; top: 10px; color: #3370ff" />
                  <template #content>
                    <a-doption v-if="nodeData.name == '全部分类'" @click="addStore.handleShow({})">
                      <span> 添加分类 </span>
                    </a-doption>
                    <template v-else>
                      <a-doption @click="addStore.handleShow(nodeData)">
                        <span> 编辑 </span>
                      </a-doption>
                      <a-doption @click="remove(nodeData)">
                        <span> 删除 </span>
                      </a-doption>
                    </template>
                  </template>
                </a-dropdown>
              </template>
            </a-tree>
          </div>
        </div>
        <div class="container">
          <div class="tool-bar">
            <a-space>
              <a-button @click="handleRemove" :disabled="!selectList.length">删除图片</a-button>
              <a-button type="primary" @click="store.handleShow({})">上传图片/视频</a-button>
            </a-space>
          </div>
          <a-spin :loading="loading" style="width: 100%">
            <div class="list">
              <div class="flex-w" v-if="list.length">
                <div :class="['item']" v-for="item in list" @click="onSelect(item)">
                  <a-tooltip :content="item.originalName">
                    <div :class="['img-box', selectList.some(f => f == item.id) ? 'active' : '']">
                      <span class="num" v-if="selectList.some(f => f == item.id)">{{ getSelectIndex(item.id) }}</span>
                      <img class="img" v-if="!['mp4', 'MP4'].includes(item.extension)" :src="item.link" />
                      <video class="video" v-else :src="item.link" />
                    </div>
                    <p class="line-2">{{ item.originalName }}</p>
                  </a-tooltip>
                </div>
              </div>
              <div class="empty flex" v-else>
                <a-empty style="margin: auto" />
              </div>
              <div class="flex">
                <a-pagination style="margin-left: auto" @change="getList" @page-size-change="getList" v-model:current="searchQuery.current" :page-size-options="[10, 20, 30, 40]" v-model:pageSize="searchQuery.size" :total="total" show-total show-jumper show-page-size />
              </div>
            </div>
          </a-spin>
        </div>
      </div>
      <UploadModal v-if="store.show" v-model:show="store.show" @confirm="onSearch" />
      <AddModalVue v-if="addStore.show" :id="addStore.id" v-model:show="addStore.show" :info="addStore.info" @confirm="onSearch(), getTab()" />
    </div>
  </a-card>
</template>
<style lang="less" scoped>
.page {
  height: 75vh;
  overflow: scroll;
}
.content {
  height: 100%;
  .tab {
    width: 220px;
    border-right: 1px solid var(--color-neutral-3);
    .scrollbar {
      max-height: 100%;
      overflow: scroll;
      &::-webkit-scrollbar {
        display: none; /* Safari and Chrome */
      }
    }
  }
  .container {
    flex: 2;

    .tool-bar {
      margin-bottom: 20px;
    }
    .list {
      padding: 20px 0;
      .item {
        margin: 0 20px 20px;
        cursor: pointer;
        width: 100px;
        .img-box {
          border: 2px solid transparent;
          overflow: hidden;
          position: relative;
          width: 100px;
          &.active {
            border: 2px solid rgb(var(--link-6));
          }
          .num {
            line-height: 20px;
            width: 20px;
            position: absolute;
            right: 2px;
            font-size: 12px;
            top: 2px;
            border-radius: 50px;
            background: rgb(var(--link-6));
            color: white;
            text-align: center;
          }
          img {
            width: 100%;
            height: 100px;
          }
          .video {
            width: 100%;
            height: 100px;
            background: #eff0f2;
          }
        }
      }
    }
  }
}
</style>
